<template>
     <div class="box">
         <el-card>
             <div>
                 <el-form :inline="true" :model="roleFormData">
                     <el-form-item :inline="true" label="角色名:">
                         <el-input v-model="roleFormData.roleName" placeholder="请输入角色名" ></el-input>
                     </el-form-item>

                     <el-form-item label="状态">
                         <el-radio v-model="roleFormData.isDeleted" :label="0" border="true" style="margin-right: 0">正常</el-radio>
                         <el-radio v-model="roleFormData.isDeleted" :label="1" border="true">禁用</el-radio>
                     </el-form-item>

                     <el-button type="primary" icon="el-icon-search" style="margin: 0 10px" plain round @click="searchRoleBtn"></el-button>
                     <el-button type="primary" icon="el-icon-circle-plus-outline" plain round @click="addBtn"></el-button>
                     <el-button type="primary" icon="el-icon-refresh-right" plain round @click="refreshPage"></el-button>
                 </el-form>
                 <template>
                     <el-table
                           class="tableBox"
                           :data="roleTableData"
                           :border="true"
                           stripe
                           width="100%"
                     >
                         <el-table-column
                               prop="id"
                               label="角色id"
                               align="center"
                         ></el-table-column>
                         <el-table-column
                               prop="roleName"
                               label="角色名"
                               align="center"
                         ></el-table-column>
                         <el-table-column
                               prop="remark"
                               label="备注"
                               align="center"
                         ></el-table-column>
                         <el-table-column
                               prop="idDeleted"
                               label="状态"
                               align="center"
                         >
                             <template slot-scope="scope">
                               <span v-if="scope.row.isDeleted=== 0" style="color: limegreen">正常</span>
                               <span v-else-if="scope.row.isDeleted=== 1" style="color:red">禁用</span>
                                 <span v-else style="color:red">???</span>
                             </template>
                       </el-table-column>
                         <el-table-column
                                 label="操作"
                                 width="235px"
                                 align="center"
                         >
                             <template slot-scope="scope">
                                 <el-button type="danger" size="small" plain round @click="delBtn(scope.row.id)">删除</el-button>
                                 <el-button type="primary" size="small" plain round @click="editBtn(scope.row)">修改</el-button>
                                 <el-button type="primary" size="small" plain round @click="permissionBtn(scope.row.id)">设置权限</el-button>
                             </template>
                         </el-table-column>
                     </el-table>
                   <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[5,10, 15, 20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total"
                   ></el-pagination>
               </template>
             </div>
         </el-card>

         <!--添加角色信息表单-->
         <div>
            <el-dialog
                    title="添加角色信息"
                    :visible.sync="addDialogVisible"
                    width="30%"
                    :close="closeAddDialog"
            >
                <el-form :model="addRoleFormData" ref="addRoleFormRef" :rules="formRules" label-width="100px">
                    <el-form-item label="角色id:" prop="id" hidden>
                        <el-input type="text" v-model="addRoleFormData.id" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="角色名:" prop="roleName" >
                        <el-input type="text" v-model="addRoleFormData.roleName" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" prop="remark" >
                        <el-input type="text" v-model="addRoleFormData.remark" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="">
                        <el-button @click="addDialogVisible=false">取消</el-button>
                        <el-button @click="addRole">确认</el-button>
                    </span>
            </el-dialog>
        </div>
         <!--修改用户信息-->
         <div>
             <el-dialog
                     title="修改用户信息"
                     :visible.sync="editDialogVisible"
                     width="30%"
                     @close="closeEditDialog"
             >
                 <el-form :model="editRoleFormData" :rules="formRules" ref="editRoleFormRef" label-width="100px">
                     <el-form-item label="角色id:" prop="id" hidden>
                         <el-input type="text" v-model="editRoleFormData.id" autocomplete="off" style="width: 80%"></el-input>
                     </el-form-item>
                     <el-form-item label="角色名:" prop="roleName">
                         <el-input type="text" v-model="editRoleFormData.roleName" autocomplete="off" style="width: 80%"></el-input>
                     </el-form-item>
                     <el-form-item label="昵称:" prop="nickName">
                         <el-input type="text" v-model="editRoleFormData.remark" autocomplete="off" style="width: 80%"></el-input>
                     </el-form-item>
                 </el-form>

                 <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editRole">确 定</el-button>
                </span>
             </el-dialog>
         </div>
         <!--权限分配-->
         <div>
             <el-dialog
                     title="用户——设置角色"
                     :visible.sync="showPermissionDialogVisible"
                     width="30%"
             >
                 <el-tree
                         :data="data"
                         show-checkbox
                         node-key="id"
                         :check-strictly="systemNodeFlag"
                         ref="rootTree"
                         :default-expanded-keys="allPermissions"
                         :default-checked-keys=allPermissions
                         highlight-current
                         :props="defaultProps">
                 </el-tree>
                 <span slot="footer" class="dialog-footer">
                <el-button @click="showPermissionDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmPermissionMenu">确 定</el-button>
            </span>
             </el-dialog>
         </div>
     </div>
</template>

<script>
    export default {
        name: "role",
        data(){
            return{
                radio:"0",
                roleTableData:[],
                roleId:"",
                allPermissions:[],
                rolePermissionIds:[],
                systemNodeFlag:false,

                currentPage:1,
                pageSize:5,
                total:0,

                roleFormData:{

                },
                addRoleFormData:{},
                editRoleFormData:{},
                addDialogVisible:false,
                editDialogVisible:false,
                showPermissionDialogVisible:false,

                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name',
                },
                modules:[],

                formRules: {
                    roleName: [
                        {required: true, message: '角色名不能为空', trigger: 'blur'},
                        {min: 2, max: 8, message: '长度在 2 到 8字符', trigger: 'blur'},
                        {
                            required: true,
                            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
                            message: '不支持特殊字符',
                            trigger: 'blur'
                        }
                    ],
                },

            }
        },
        created() {
            this.initRoleTable();
        },
        methods:{
            /*刷新页面*/
            refreshPage() {
                window.location.reload()
            },

            closeAddDialog(){
                this.$refs.addRoleFormRef.resetFields();
            },
            closeEditDialog(){
                this.$refs.editRoleFormRef.resetFields();
            },
            //搜索&显示
            searchRoleBtn(){
                this.initRoleTable()
            },
            initRoleTable(){
                let that =this;
                this.$http.post(`/system/Role/selectAllRoles/${this.currentPage}/${this.pageSize}`,this.roleFormData).then(function (resp) {
                    if(resp.data.code===2000){
                        that.roleTableData = resp.data.result.records;
                        that.total = resp.data.result.total;
                    }
                })
            },
            //添加角色
            addBtn(){
                this.addRoleFormData={};
                this.addDialogVisible=true;
            },
            addRole(){
                let that = this;
                this.$refs.addRoleFormRef.validate((valid) => {
                    if (valid){
                        this.$http.post(`/system/Role/addRole`,this.addRoleFormData).then(function (resp) {
                            if (resp.data.code===2000){
                                that.$message.success(resp.data.msg);
                                that.addDialogVisible=false;
                                that.initRoleTable();
                            }

                        })
                    }
                })
            },
            //删除角色
            delBtn(id){
                let that =this;
                this.$http.post(`/system/Role/delRoleById/${id}`).then(function (resp) {
                    if (resp.data.code===2000){
                        that.$message.success(resp.data.msg);
                        that.initRoleTable();
                    }else{
                        that.$message.fail(resp.data.msg);
                    }
                })
            },
            /*编辑角色信息*/
            editBtn(row){
                this.editRoleFormData=row;
                this.editDialogVisible=true;
                this.initRoleTable();
            },
            editRole(){
                let that = this;
                this.$refs.editRoleFormRef.validate((valid) => {
                        if (valid){
                            this.$http.post(`/system/Role/editRoleMsgById`,this.editRoleFormData).then(function (resp) {
                                if (resp.data.code===2000){
                                    that.$message.success(resp.data.msg);
                                    that.editDialogVisible=false;
                                    that.initRoleTable();
                                }
                            })
                        }
                    }
                )
            },
            //分配权限
            permissionBtn(roleId){
                this.showPermissionDialogVisible=true;
                this.roleId = roleId;
                let that = this;
                this.$http.get(`/system/Permission/selPermissionByRoleId/`+roleId).then(function (resp) {
                    setTimeout( () => {
                        resp.data.result.allPermissions.forEach((i,n) => {
                            let node = that.$refs.rootTree.getNode(i);
                            if(node.isLeaf){
                                that.$refs.rootTree.setChecked(node, true);
                            }
                        })}, 10)
                    that.data= resp.data.result.rolePermissionIds;
                    that.allPermissions = resp.data.result.allPermissions
                });
            },
            //确认提交分配权限按钮
            confirmPermissionMenu(){
                let that = this;
                let menuIds = this.$refs.rootTree.getCheckedKeys().concat(this.$refs.rootTree.getHalfCheckedKeys());
                this.$http.post(`/system/RolePermission/confirmPermissionMenu`,{roleId:this.roleId,menuIds:menuIds}).then(function (resp) {
                    if (resp.data.code === 2000){
                        that.$message({
                            message:resp.data.msg,
                            type: "success",
                            duration: '1500'
                        });
                        that.showPermissionDialogVisible = false;
                        that.initRoleTable();
                    }
                })
            },

            /*分页*/
            handleSizeChange(val){
                this.pageSize = val;
                this.initRoleTable();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initRoleTable();
            },
        },
    }
</script>

<style >
    .box{
        /*padding: 10px 20px;*/
    }
    .item .el-form-item__label{
        padding-left: 5px;
    }
    .el-dialog__body{
        padding: 20px;
    }
    .role_dialog .el-dialog__body{
        padding: 10px 20px 20px;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>